<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="我的团队" :border="false" :fixed="true" bg="bg-zhuse" color="#fff" @clickLeft="goBack()"></uni-nav-bar>
		<view class="margin-top-30 padding-x-30">
			<!-- <view class="radius20 color-fff profit">
				<view class="fs-26">累计总收益</view>
				<view class="fs-40 margin-top-30">{{info.total_commission}}</view>
			</view> -->
			<view class="bg-fff radius20 margin-y-20 padding-y-30 padding-left-30 flex align-center">
				<image src="../../static/img/sousuo.png" style="width: 24rpx; height: 24rpx;"></image>
				<input type="text" placeholder="输入会员昵称或手机号搜索" style="width: 100%;" class="margin-left-20 fs-26" v-model="keyword" @confirm="sousuo"/>
			</view>
			<view class="radius-top30 bg-fff  padding-x-30">
				<view class="flex align-center justify-around">
					<view class="padding-y-30 fs-24 color-999 solid-bottom" v-for="(item,index) in nav" :key="index" :class="{'on':count == item.id}"
						@tap="change(item)">
						<view class="padding-10">{{item.title}}</view>
					</view>
				</view>
				<view class="padding-y-20 solid-bottom flex align-center justify-between" v-for="(item,index) in list" :key="index" :class="btnnum == item.id">
					<view class="flex align-center">
						<image :src="item.avatar" style="width: 100rpx; height: 100rpx; border-radius: 100%;"></image>
						<view class="margin-left-20">
							<view class="flex align-center">
								<view class="fs-26 color-333">{{item.name}} <text class="fs-24 color-999  margin-left-30">ID:{{item.id}}</text></view>
								<!-- <view  class="fs-20 color-fff bg-zhuse text-center margin-left-30" style="padding: 2rpx 12rpx;border-radius: 40rpx;">{{item.level_name}}</view> -->
							</view>
							<view class="fs-22 color-666 margin-top-30">{{item.mobile}}</view>
						</view>
					</view>
					<!-- <view style="text-align-last: right;">
						<view class="color-999 fs-24">累计收益</view>
						<view class="color-zhuse fs-26 margin-top-30">{{item.commission}}</view>
					</view> -->
				</view>
				<view class="nomore" :class="loadStatus" v-if="list.length"></view>
				<empty position="static" v-if="list.length < 1"></empty>
			</view>
			
		</view>
			<view class=" radius20 padding-30 margin-top-40 color-333">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				nav:[
					
					{
						id:1,
						title:'直推',
						type:'zhi'
					},
					{
						id:2,
						title:'间推',
						type:'team'
					},
					// {
					// 	id:3,
					// 	title:'团队',
					// 	type:'team'
					// },
				],
				count: 1,
				btnnum:1,
				list:[],
				type:'zhi',
				page:1,
				keyword:'',
				info:''
			}
		},
		onLoad() {
			this.getList()
			this.init()
		},
		onShow() {
			
		},
		onReachBottom() {
			if(this.hasMore){
				this.page += 1;
				this.getList()
			}
		},
		methods:{
			init() {
				this.$api.material().then(res => {
					if (res.code == 1) {
						this.info = res.data.data;
					}
				})
			},
			change(item) {
				this.count = item.id
				this.btnnum = item.id
				this.type=item.type
				this.page=1
				this.list=[]
				this.getList()
			},
			sousuo(){
				if(!this.keyword){
					uni.showToast({
						title:'请输入搜索内容',
						icon:'none',
					})
					return;
				}
				this.page=1
				this.list=[]
				this.getList()
			},
			getList(){
				this.$api.team_list({
					page:this.page,
					type:this.type,
					keywords:this.keyword
				}).then(res => {
					//上拉加载
					this.isLoading = false;
					this.list = [...this.list, ...res.data.data.data];
					if (res.data.data.data.length != 0) {
						this.hasMore = true;
						this.loadStatus = '';
					}else {
						this.hasMore = false;
						this.loadStatus = 'over';
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.profit{
		background: linear-gradient(to right,#FFA465,#FF6B35);
		height: 196rpx;
		padding: 50rpx 0rpx 50rpx 40rpx;
	}
	.on{
		color: #FF6B35;
		view{
			border-bottom: 8rpx solid #FF6B35;
			
		}
	}
</style>
<style>
	page{
		background: #F7F7F7;
	}
</style>
